{% block sw_users_permissions_detailed_permissions_grid %}
<mt-card
    class="sw-users-permissions-detailed-permissions-grid"
    position-identifier="sw-users-permissions-detailed-permissions-grid"
    :title="$tc('sw-users-permissions.roles.grid.title')"
>
    <div class="sw-users-permissions-detailed-permissions-grid__grid">
        {% block sw_users_permissions_detailed_permissions_grid_header %}
        <div class="sw-users-permissions-detailed-permissions-grid__entry sw-users-permissions-detailed-permissions-grid__entry-header">
            {% block sw_users_permissions_detailed_permissions_grid_header_title %}
            <div class="sw-users-permissions-detailed-permissions-grid__title"></div>
            {% endblock %}

            {% block sw_users_permissions_detailed_permissions_grid_header_roles %}
            <div
                v-for="permissionType in permissionTypes"
                :key="permissionType"
                class="sw-users-permissions-detailed-permissions-grid__checkbox-wrapper"
            >
                {% block sw_users_permissions_detailed_permissions_grid_header_roles_name %}
                {{ $tc('sw-privileges.permissionType.' + permissionType) }}
                {% endblock %}
            </div>
            {% endblock %}
        </div>
        {% endblock %}

        {% block sw_users_permissions_detailed_permissions_grid_permissions %}
        <div
            v-for="entity in allEntities"
            :key="entity"
            :class="'sw-users-permissions-detailed-permissions-grid__entry_' + entity"
            class="sw-users-permissions-detailed-permissions-grid__entry"
        >
            {% block sw_users_permissions_detailed_permissions_grid_permissions_title %}
            <div class="sw-users-permissions-detailed-permissions-grid__title">
                {{ entity }}
            </div>
            {% endblock %}

            {% block sw_users_permissions_detailed_permissions_grid_permissions_roles %}
            <div
                v-for="permissionType in permissionTypes"
                :key="permissionType"
                :class="'sw-users-permissions-detailed-permissions-grid__role_' + permissionType"
                class="sw-users-permissions-detailed-permissions-grid__checkbox-wrapper"
            >
                {% block sw_users_permissions_detailed_permissions_grid_permissions_roles_field %}
                {# Checkbox are hardcoded for better performance #}
                <div class="sw-field--checkbox">
                    <div class="sw-field--checkbox__content">
                        <div class="sw-field__checkbox">
                            <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
                            <input
                                type="checkbox"
                                :name="entity"
                                :disabled="isEntityDisabled(entity, permissionType)"
                                :checked="isEntitySelected(entity, permissionType)"
                                @change="changePermissionForEntity(entity, permissionType)"
                            >
                            <div class="sw-field__checkbox-state">
                                <span
                                    class="mt-icon mt-icon--fill"
                                    style="width: 16px; height: 16px;"
                                >
                                    <svg
                                        xmlns="http://www.w3.org/2000/svg"
                                        xmlns:xlink="http://www.w3.org/1999/xlink"
                                        width="16"
                                        height="16"
                                        viewBox="0 0 16 16"
                                    >
                                        <defs>
                                            <path
                                                id="icons-small-default-checkmark-line-small-a"
                                                d="M5.70710678,7.29289322 C5.31658249,6.90236893 4.68341751,6.90236893 4.29289322,7.29289322 C3.90236893,7.68341751 3.90236893,8.31658249 4.29289322,8.70710678 L6.29289322,10.7071068 C6.68341751,11.0976311 7.31658249,11.0976311 7.70710678,10.7071068 L11.7071068,6.70710678 C12.0976311,6.31658249 12.0976311,5.68341751 11.7071068,5.29289322 C11.3165825,4.90236893 10.6834175,4.90236893 10.2928932,5.29289322 L7,8.58578644 L5.70710678,7.29289322 Z"
                                            />
                                        </defs>
                                        <use
                                            fill="#758CA3"
                                            fill-rule="evenodd"
                                            xlink:href="#icons-small-default-checkmark-line-small-a"
                                        />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                {% endblock %}
            </div>
            {% endblock %}
        </div>
        {% endblock %}
    </div>
</mt-card>
{% endblock %}
